<template>
  <d2-container>
    <el-form
      :model="FromData"
      status-icon
      :rules="rules"
      ref="FromData"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="旧密码" prop="oldPwd">
        <el-input type="text" v-model="FromData.oldPwd" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPwd">
        <el-input type="text" v-model="FromData.newPwd" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confPwd">
        <el-input type="text" v-model="FromData.confPwd"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('FromData')">提交</el-button>
        <el-button @click="resetForm('FromData')">重置</el-button>
      </el-form-item>
    </el-form>
  </d2-container>
</template>

<script>
import { updateXntAccount } from "@/api/user/index";
import util from '@/libs/util.js'

export default {
  data() {
    return {
      FromData: {
        oldPwd: "",
        newPwd: "",
        confPwd: ""
      },
      rules: {
        oldPwd: [{ required: true, validator: "", trigger: "blur" }],
        newPwd: [{ required: true, validator: "", trigger: "blur" }],
        confPwd: [{ required: true, validator: "", trigger: "blur" }]
      }
    };
  },
  created() {
    // 进行初始化页面判断
    this.rules.oldPwd[0].validator = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("旧密码不能为空"));
      }
      callback();
    };
    this.rules.newPwd[0].validator = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        if (this.FromData.confPwd !== "") {
          this.$refs.FromData.validateField("confPwd");
        }
        callback();
      }
    };
    this.rules.confPwd[0].validator = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.FromData.newPwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
  },
  methods: {
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        // 如果表单通过，则发送请求
        if (valid) {
          let params = {
            id: util.cookies.get('uuid'),
            // account: this.FromData.oldPwd,
            pwd: this.FromData.confPwd
          };
          updateXntAccount(params)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: "success",
                  message: "修改成功,请重新登录!"
                });
                // 删除cookie
                util.cookies.remove('token')
                util.cookies.remove('uuid')
                util.cookies.remove('roleid')
                // 清空 vuex 用户信息
                this.$store.dispatch('d2admin/user/set', {}, { root: true })
                // 跳转路由
                this.$router.push({
                  name: 'login'
                })
              } else {
                this.$message({
                  type: "error",
                  message: res.msg
                });
              }
            })
            .catch(err => {
              this.$message.error("表单校验失败，请检查" + err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
